<template>
	<view>
		<view class="statbar"></view>
		<view style="background: linear-gradient(to right, #ff8763, #ff6364)">
			<view class="header">

				<view class="userinfo">
					<view class="face">
						<image v-if="isRresh" :src="userinfo.avatar"></image>
					</view>
					<view class="info" @click="toPerson">
						<view class="username" v-if="isRresh">{{userinfo.nickName}}</view>
						<view class="integral" v-if="showId">ID:{{userinfo.userId}}</view>
					</view>
				</view>
				<view v-if="showId" class="setting" @click="toPerson">
					<image src="../../static/icon/qcode.png"></image>
					<image src="../../static/icon/arrow-right.png"></image>
				</view>
			</view>
			<view class="usign" v-if="showId">签名: {{userinfo.usign}}</view>

		</view>
		<view class="orders">
			<view class="box">
				<u--text text="已推广0人"></u--text>

				<u-button @click="toPage('/pages/invite/invite')" type="primary"
					color="linear-gradient(to right, #ff8763, #ff6364)" shape="circle" text="分享推广"
					customStyle="width:100px;height:35px"></u-button>
			</view>
		</view>
		<view>
			<u-cell-group :border="showBorder">
				<u-cell :border="showBorder" class="cell" title="观看历史" icon="clock-fill" size="large"
					iconStyle="color: #ff8763" url="/pages/history/history" :isLink="true"></u-cell>
					<u-line></u-line>
					
				<u-cell :border="showBorder" class="cell" title="意见反馈" icon="edit-pen-fill" size="large"
					iconStyle="color: #ff8763" url="/pages/feedback/feedback" :isLink="true"></u-cell>
					<u-line></u-line>
			    <!-- #ifdef APP-PLUS -->
			    <u-cell :border="showBorder" class="cell" title="我的客服" icon="server-man" size="large"
			    	iconStyle="color: #ff8763" @click="goChat" :isLink="true"></u-cell>
			    	<u-line></u-line>
			    <!-- #endif -->
				
					
				<u-cell :border="showBorder" class="cell" title="系统设置" icon="setting-fill" size="large"
					iconStyle="color: #ff8763" url="/pages/settings/settings" :isLink="true"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>
<script>
	import vodcard from '../../pages/card/card.vue';

	export default {
		components: {
			"vod-card": vodcard
		},
		data() {
			return {
				isRresh: true,
				historyShow: false,
				showBorder: false,
				userinfo: {},
				userId: '',
				showId: false,
				vodHistoryList: []
			};
		},
		onShow() {
			let change = getApp().globalData.headerChange
			if (change) {
				getApp().globalData.headerChange = false;
				this.isRresh = false;
				setTimeout(() => {
					this.initd()
					this.isRresh = true
				}, 10)
			}

		},
		onLoad() {
			this.isRresh = false
			setTimeout(() => {
				this.initd()
				this.isRresh = true
			}, 10)
		},
		created() {
			this.initd()
		},
		methods: {
			initd() {
				let userId = uni.getStorageSync('userId')
				if (userId) {
					uni.preloadPage({
						url: "/pages/chat/chat"
					});
					this.showId = true
					let user = uni.getStorageSync('user');
					if (user.userId) {
						this.userinfo = user
					} else {
						this.userinfo = JSON.parse(user)
					}
				} else {

					this.userinfo = {
						"nickName": "未登录",
						"avatar": "../../static/avatar.png"
					}
				}
			},
			toPerson() {
				let userId = uni.getStorageSync('userId')
				if (userId) {
					uni.navigateTo({
						url: '/pages/user/user'
					})
				} else {
					uni.reLaunch({
						url: '../login/login'
					})
				}
			},
			toSetting() {
				uni.$u.route({
					url: '/pages/user/user'
				})
			},
			init() {
				this.isRresh = false
				setTimeout(() => {
					this.isRresh = true
				}, 200)

			},
			initCacheVodInfo() {
				try {
					this.vodHistoryList = uni.getStorageSync('videoHistory')
					if (!this.vodHistoryList) {
						this.vodHistoryList = [];
					}
				} catch (error) {
					console.log('error', error)
				}
			},
			//用户点击列表项
			toPage(url, param) {
				uni.$u.route({
					url: url,
					params: param
				})
			},
			goChat() {
				let userId = uni.getStorageSync('userId');
				if (userId) {
					setTimeout(() => {
						this.toPage("/pages/chat/chat", {})
					}, 50)
				} else {
					uni.reLaunch({
						url: '../login/login'
					})

				}
			}
		}
	}
</script>

<style lang="scss">
	.statbar {
		height: var(--status-bar-height);
		background: linear-gradient(to right, #ff8763, #ff6364);
	}

	.hover {
		background-color: #eee
	}
	page {
		background-color: #e7e7e7,
	}
	
	.orders {
		background: linear-gradient(to right, #ff8763, #ff6364);
		width: 92%;
		height: 11vw;
		padding: 0 4%;
		margin-bottom: calc(11vw + 40upx);
		display: flex;
		align-items: flex-start;
		border-radius: 0 0 100% 100%;
		margin-top: -1upx;

		.box {
			width: 98%;
			padding: 0 5%;
			height: 22vw;
			background-color: #fefefe;
			border-radius: 24upx;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
			margin-bottom: 40upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.u-collapse-item,
	.cell {
		padding: 5px 0px 5px 20px;
		background-color: #FFFFFF;
	}

	.vod {
		width: 70px;
		height: 115px;
	}

	.cover {
		width: 70px;
		height: 100px;
		border-radius: 2px;
		position: relative;
	}

	.renew {
		position: relative;
		top: -30px;
		color: #ffffff;
		font-size: 10px;
		text-align: right;
		right: 10px;
	}

	.title {
		z-index: 999;
		position: relative;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 10px;
		top: -5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.more-bg {
		background-color: #FFFFFF;
		width: 70px;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.more-mg {
		width: 70px;
		height: 100px;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		background-color: #D8D8D8;
		border-radius: 2px;
	}

	.more-img {
		width: 20px;
		height: 20px;
	}

	.more-font {
		color: #8a8a8a;
		font-size: 8px;
		justify-content: center;
	}

	/deep/ .u-text__value {
		font-size: 18px;
	}

	.usign {
		clear: both;
		position: relative;
		top: -35rpx;
		display: flex;
		align-items: center;
		padding-left: 50upx;
		background-color: linear-gradient(to right, #ff8763, #ff6364);
		padding-right: 50upx;
		height: 40upx;
		color: #fff;
		border-radius: 20upx;
		font-size: 26upx
	}

	.header {
		background: linear-gradient(to right, #ff8763, #ff6364);
		width: 92%;
		height: 30vw;
		padding: 0 4%;
		display: flex;
		align-items: center;

		.userinfo {
			width: 90%;
			display: flex;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;
				align-items: center;

				.username {
					width: 100%;
					color: #fff;
					padding-left: 20upx;
					font-size: 40upx
				}

				.integral {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					height: 40upx;
					color: #fff;
					margin-top: 5rpx;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					font-size: 24upx
				}

			}
		}

		.setting {
			flex-shrink: 0;
			width: 12vw;
			height: 6vw;
			display: flex;
			flex-direction: row;

			image {
				width: 100%;
				height: 100%
			}
		}
	}
</style>
